<template>
  
  <div v-loading="load" element-loading-text="正在加载数据" style="min-height:300px">
    <div v-if="cation_state ==0" style="margin-bottom:20px;">
      <alert-box content="您的跑团未认证或认证已过期不能发展二级跑团"></alert-box>
    </div>
    <!-- 本跑团信息 -->
    <div class="body-box team-item-box">
      <!-- logo -->
      <img :src="team_info.Logo" class="z-team-logo">
      <!-- 信息 -->
      <div class="z-team-info">
        <div class="z-team-name">{{team_info.Title}}</div>
        <div class="z-team-other">
          <span>id：{{team_info.IdCode}}</span>
          <span>城市：{{team_info.City}}</span>
          <span>活动数：{{team_info.active_num}}</span>
        </div>
        <div class="z-team-other">
          {{team_info.Contacter}}({{team_info.Contact}})
        </div>
      </div>
      <div class="z-team-btm">
        <div :class="cation_state == 0 ? 'z-team-btn-sm z-team-btn-sm-disable1':'z-team-btn-sm z-team-btn-sm-pink'" @click="addNext()"> <i class="iconfont icon-yaoqing"></i> 邀请加入</div>
        <div :class="parent_info ? 'z-team-btn-sm z-team-btn-sm-disable' : 'z-team-btn-sm z-team-btn-sm-orange'" @click="applyLast()"> <i class="iconfont icon-jiahao"></i> 申请加入</div>
      </div>
      <div class="z-team-btm z-team-btn-blue" @click="invite(1)">
        <div class="z-team-btn-title">邀请列表</div>
        <div class="z-team-btn-num">{{parent_invit_num}}</div>
      </div>
      <!-- 按钮 -->
      <div class="z-team-btm z-team-btn-yellwo" @click="invite(2)">
        <div class="z-team-btn-title">申请列表</div>
        <div class="z-team-btn-num">{{child_apply_num}}</div>
      </div>
      
    </div>
    <!-- 上级跑团信息 -->
    <div class="body-box team-item-box" v-if="parent_info">
      <!-- logo -->
      <img :src="parent_info.Logo" class="z-team-logo">
      <!-- 信息 -->
      <div class="z-team-info">
        <div class="z-team-name">{{parent_info.Title}}</div>
        <div class="z-team-other">
          <span>id：{{parent_info.IdCode}}</span>
          <span>城市：{{parent_info.City}}</span>
          <span>活动数：{{parent_info.active_num}}</span>
        </div>
        <div class="z-team-other">
          {{parent_info.Contacter}}({{parent_info.Contact}})
        </div>
      </div>
      <div class="z-team-btm">
        <div class="z-team-btn-sm z-team-btn-sm-info" @click="cancleLink()"> <i class="iconfont icon-jiechu"></i> 解除关系</div>
      </div>
      <div class="z-team-btm z-team-btn-red">
        <div class="z-team-btn-title">会员数</div>
        <div class="z-team-btn-num">{{parent_info.user_num}}</div>
      </div>
      <!-- 按钮 -->
      <div class="z-team-btm z-team-btn-green">
        <div class="z-team-btn-title">活动数</div>
        <div class="z-team-btn-num">{{parent_info.active_num}}</div>
      </div>
      
    </div>
    <div class="body-box no-parent-team" v-else>
      暂无上级跑团
    </div>
    <!-- 二级跑团列表 -->
    <div class="body-box">
      <window-title title="下级跑团列表"></window-title>
      <el-table :data="child_list.data" size="mini" :header-cell-style="{background:'#f1f1f1'}" style="margin-top:10px" border>
        <el-table-column type="index" width="50px"></el-table-column>
        <el-table-column label="跑团名称" prop="Title"></el-table-column>
        <el-table-column label="ID" prop="IdCode" width="70px"></el-table-column>
        <el-table-column label="团长" prop="Contacter" width="80px"></el-table-column>
        <el-table-column label="手机号" prop="Contact" width="100px"></el-table-column>
        <el-table-column label="城市" prop="City" width="100px"></el-table-column>
        <el-table-column label="会员数" prop="user_num" width="60px"></el-table-column>
        <el-table-column label="活动数" prop="active_num" width="60px"></el-table-column>
        <el-table-column label="创建时间" prop="CreateTime" width="140px"></el-table-column>
        <el-table-column label="操作" prop="CreateTime" width="100px">
          <template slot-scope="item">
            <el-button size="mini" icon="el-icon-view" @click="see(item.row.child_id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
          <el-pagination
            background
            small
            :current-page="child_list.current_page"
            :page-size="child_list.per_page"
            layout="total, prev, pager, next, jumper"
            :total="child_list.total"
            @current-change="changePage"
          ></el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import applySearch from "./apply-search.vue";
import windowTitle from '../../components/unit/title.vue';
import inviteList from './invite-list.vue';
import alertBox from '../../components/unit/alert-box.vue';

export default {
  components: { applySearch , windowTitle , inviteList , alertBox},
  data() {
    return {
      load: true,
      activeName: "1",
      team_info: {},
      parent_info: {},
      parent_invit: {},
      child_num: 0,
      child_apply_num: 0,
      child_list: {
        data:[],
        current_page : 1
      },
      parent_invit_num: 0,
      cation_state : -1
    };
  },
  mounted() {
    this.getData();
    this.getChildList();
    this.getCation();
  },
  methods: {
    //获取认证信息
    getCation() {
      this.ajaxs("finance/getCationInfo", {
        success: res => {
          var cation_type = res.msg.cation_type;
          this.cation = res.msg;
          this.cation_state = 1;
          if (!res.code){
             this.cation_state = 0;
             cation_type = 0;
          }
          window.localStorage.setItem('cation',cation_type)
        }
      });
    },
    //查看
    see(id){
      this.$router.push({
        path : '/manage/team/list/info/'+id
      });
      localStorage.setItem(
        "router_query",
        JSON.stringify({
          path: "/manage/team/list"
        })
      );
    },
    //查看邀请列表
    invite(param){
      this.$layer.iframe({
        content: {
          content: inviteList, //传递的组件对象
          parent: this, //当前的vue对象
          data: {
            model_style: param
          } //props
        },
        area: ["1000px", "600px"],
        title: param == 1 ?  "邀请列表" : '申请列表'
      });
    },
    //获取页面加载数据
    getData() {
      this.ajaxs("club/clubRelation", {
        success: res => {
          var data = res.msg;
          this.team_info = data.team_info;
          this.parent_info = data.parent_info;
          this.child_num = data.child_num;
          this.child_apply_num = data.child_apply_num;
          this.parent_invit_num = data.parent_invit_num;
          if (this.parent_invit_num == 0 && this.activeName == "3") {
            this.activeName = "1";
          }
          this.load = false;
        }
      });
    },
    //获取二级跑团
    getChildList(){
      this.ajaxs('club/getChildList',{
        data:{page : this.child_list.current_page},
        success:(res) =>{
          this.child_list = res.msg;
        }
      });
    },
    //分页
    changePage(e){
      this.child_list.current_page = e;
      this.getChildList();
    },
    //申请成为二级跑团
    applyLast() {
      if(this.parent_info)return this.toast(0,'已存在上级跑团');
      this.$layer.iframe({
        content: {
          content: applySearch, //传递的组件对象
          parent: this, //当前的vue对象
          data: {
            is_apply: true
          } //props
        },
        area: ["800px", "600px"],
        title: "跑团搜索"
      });
    },
    //邀请加入
    addNext() {
      if(this.cation_state < 1)return this.toast(0,'未认证的跑团不可发展二级跑团');
      this.$layer.iframe({
        content: {
          content: applySearch, //传递的组件对象
          parent: this, //当前的vue对象
          data: {
            is_apply: false
          } //props
        },
        area: ["800px", "600px"],
        title: "跑团搜索"
      });
    },
    //接触关系
    cancleLink() {
      this.$confirm("确定解除与一级跑团的关系?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ajaxs("club/disengagement", {
            data: { club_id: this.parent_info.Id, style: 2 },
            success: res => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.getData();
              }
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style>
@import url('../../assets/css/team/list.css');
</style>